<template>
  <div class="mobile-user-center">
    <!-- 头部导航 -->
    <el-header class="page-header">
      <div class="back-btn" @click="$router.back()">
        <el-icon>
          <ArrowLeft/>
        </el-icon>
      </div>
      <h1>个人中心</h1>
      <div class="action-btn">
        <el-icon>
          <Setting/>
        </el-icon>
      </div>
    </el-header>
    <!-- 个人信息区域 -->
    <div class="user-info-section">
      <div class="avatar-wrapper">
        <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            accept="image/jpeg,image/png"
        >
          <img v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar"/>
          <el-icon v-else class="avatar-uploader-icon">
            <Plus/>
          </el-icon>
        </el-upload>
      </div>
      <div class="user-base">
        <h3 class="user-name">{{ userInfo.nickname }}</h3>
        <!-- 状态判断：字符串'1'为已认证 -->
        <el-tag :type="userInfo.status === '1' ? 'success' : 'info'" class="auth-tag">
          {{ userInfo.status === '1' ? '已认证' : '未认证' }}
        </el-tag>
      </div>
      <div class="credit-info">
        <span class="credit-value">{{ userInfo.credit }}</span>
        <span class="credit-label">信誉分</span>
      </div>
    </div>

    <!-- 功能菜单列表 -->
    <el-card class="menu-card">
      <div class="menu-list">
        <div class="menu-item" @click="$router.push('/profile')">
          <div class="item-left">
            <el-icon><User/></el-icon>
            <span>基本资料</span>
          </div>
          <el-icon><ArrowRight/></el-icon>
        </div>
        <!-- 跳转实名认证页面 -->
        <div class="menu-item" @click="$router.push('/certification')">
          <div class="item-left">
            <el-icon><User/></el-icon>
            <span>实名认证
             <span class="credit-reward">完成认证信誉分+20分</span></span>
          </div>
          <el-icon><ArrowRight/></el-icon>
        </div>
        <div class="menu-item" @click="$router.push('/user/orders')">
          <div class="item-left">
            <el-icon><ShoppingCart/></el-icon>
            <span>我的订单</span>
          </div>
          <el-icon><ArrowRight/></el-icon>
        </div>
        <!-- 新增：每日签到入口，跳转至签到页面 -->
        <div class="menu-item" @click="$router.push('/signIn')">
          <div class="item-left">
            <el-icon><Calendar/></el-icon> <!-- 使用日历图标，贴合签到场景 -->
            <span>每日签到
             <span class="credit-reward">签到可获50积分</span></span> <!-- 提示积分奖励，吸引点击 -->
          </div>
          <el-icon><ArrowRight/></el-icon>
        </div>
        <div class="menu-item" @click="$router.push('/wallet')">
          <div class="item-left">
            <el-icon><Ticket/></el-icon>
            <span>我的优惠券</span>
          </div>
          <el-icon><ArrowRight/></el-icon>
        </div>
      </div>
    </el-card>

    <!-- 底部退出按钮 -->
    <div class="logout-btn">
      <el-button type="danger" @click="handleLogout">退出登录</el-button>
    </div>
  </div>
</template>

<script>
import {
  Plus, ArrowLeft, Setting, ShoppingCart, Ticket, User, ArrowRight,
  Calendar // 新增：导入日历图标，用于签到入口
} from '@element-plus/icons-vue'
import {ElMessage, ElHeader, ElCard, ElButton, ElTag} from 'element-plus'
import {ElMessageBox} from 'element-plus';
import {exit, getUser, updateAvatar} from "../api/user.js";

export default {
  name: "MobileMyDetail",
  components: {
    Plus, ArrowLeft, Setting, ShoppingCart, Ticket, User, ArrowRight, Calendar, // 注册新增的日历图标
    ElHeader, ElCard, ElButton, ElTag
  },
  data() {
    return {
      userInfo: {
        nickname: '用户12345',
        avatar: 'https://cdn-icons-png.flaticon.com/512/149/149071.png',
        status: '0', // 初始设为未认证（字符串类型，与接口一致）
        credit: 60,
      }
    }
  },
  methods: {
    async loadData() {
        // 调用接口获取最新用户信息
        let {data: data} = await getUser()
        console.log("用户信息：", data)
        this.userInfo = data.data
        if (!this.userInfo.avatar || this.userInfo.avatar === 'undefined') {
          this.userInfo.avatar = 'https://cdn-icons-png.flaticon.com/512/149/149071.png'
        }
        // 关键：将用户信息存入localStorage，供实名认证页面读取
        localStorage.setItem('userInfo', JSON.stringify(this.userInfo))
    },
    async handleAvatarSuccess(ref, file) {
      const formData = new FormData();
      formData.append('file', file.raw);
        let {data: data} = await updateAvatar(formData)
        console.log(data)
        if (data.code === 200) {
          this.userInfo.avatar = data.data.avatar
          ElMessage.success('头像更换成功')
          this.loadData()
        } else {
          ElMessage.error('头像更换失败');
        }
    },
    beforeAvatarUpload(file) {
      const isImage = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isImage) {
        ElMessage.error('请上传 JPG 或 PNG 格式的图片')
        return false
      }
      if (!isLt2M) {
        ElMessage.error('图片大小不能超过 2MB')
        return false
      }
      return true
    },
    async handleLogout() {
      try {
        await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });
        let {data: data} = await exit()
        if (data.code === 200) {
          ElMessage.success('退出登录成功');
          // 退出时清除缓存
          localStorage.removeItem('userInfo')
          this.$router.push('/')
        }
      } catch (error) {
        ElMessage.info('已取消退出');
      }
    }
  },
  mounted() {
    // 页面加载时获取用户信息
    this.loadData()
  }
}
</script>
<style scoped>
.mobile-user-center {
  width: 100vw;
  min-height: 100vh;
  background-color: #f5f7fa;
  font-size: 14px;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.time {
  font-size: 12px;
  color: #333;
}

.icons {
  display: flex;
  gap: 8px;
  color: #333;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: #409EFF;
  color: #fff;
}

.back-btn, .action-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
}

.page-header h1 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.user-info-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  background-color: #fff;
}

.avatar-wrapper {
  margin-bottom: 16px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f0f0f0;
}

.avatar-uploader-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #999;
}

.user-base {
  text-align: center;
  margin-bottom: 12px;
}

.user-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}

.auth-tag {
  font-size: 12px;
  padding: 2px 8px;
}

.credit-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #666;
}

.credit-value {
  font-size: 16px;
  font-weight: 600;
  color: #409EFF;
  margin-bottom: 4px;
}

.menu-card {
  margin: 16px;
  border-radius: 8px;
  overflow: hidden;
}

.menu-list {
  background-color: #fff;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.menu-item:last-child {
  border-bottom: none;
}

.item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logout-btn {
  display: flex;
  justify-content: center;
  padding: 24px 16px;
}

.logout-btn .el-button {
  width: 100%;
  max-width: 300px;
}
.credit-reward {
  margin-left: 8px;
  font-size: 12px;
  color: #67C23A; /* 绿色，与"已认证"标签颜色呼应 */
  background-color: rgba(103, 194, 58, 0.1); /* 浅色背景突出提示 */
  padding: 1px 6px;
  border-radius: 4px;
}
</style>